<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Space 间距</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="../static/js/vue.global.js"></script> -->
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.item {
	margin-bottom: 18px;
}
.text {
	font-size: 14px;
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">最基础的用法，通过这个组件来给组件之间提供统一的间距。</p>
	<p class="desc">通过间距组件来给多个组件之间提供间距</p>
	<el-space wrap>
		<el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
			<template #header>
				<div class="card-header">
					<span>Card name</span>
					<el-button class="button" type="text">Operation button</el-button>
				</div>
			</template>
			<div v-for="o in 4" :key="o" class="text item">
				{{ 'List item ' + o }}
			</div>
		</el-card>
	</el-space>
	
	<el-divider content-position="left">垂直布局</el-divider><!-- =============================================================== -->
	<p class="desc">我们也提供垂直布局方式。</p>
	<p class="desc">使用 direction 来控制布局的方式, 背后实际上是利用了 flex-direction 来控制.</p>
	<el-space direction="vertical">
		<el-card v-for="i in 2" :key="i" class="box-card" style="width: 250px">
			<template #header>
				<div class="card-header">
					<span>Card name</span>
					<el-button class="button" type="text">Operation button</el-button>
				</div>
			</template>
			<div v-for="o in 4" :key="o" class="text item">
				{{ 'List item ' + o }}
			</div>
		</el-card>
	</el-space>
	
	<el-divider content-position="left">控制间距的大小</el-divider><!-- =============================================================== -->
	<p class="desc">通过调整 size 的值来控制间距的大小</p>
	<p class="desc">使用内置的 small、default、large 来设置间距大小，分别对应 8px、12px 和 16px 的间距。 默认的间距大小为 small，也就是 8px。</p>
	<p class="desc">您也可以通过自定义的 size 来控制大小， 参见下一个部分。</p>
	<el-space direction="vertical" alignment="start" :size="30">
		<el-radio-group v-model="size">
			<el-radio :label="'small'">small</el-radio>
			<el-radio :label="'default'">default</el-radio>
			<el-radio :label="'large'">large</el-radio>
		</el-radio-group>
	
		<el-space wrap :size="size">
			<el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
				<template #header>
					<div class="card-header">
						<span>Card name</span>
						<el-button class="button" type="text">Operation button</el-button>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ 'List item ' + o }}
				</div>
			</el-card>
		</el-space>
	</el-space>
	
	<el-divider content-position="left">自定义 Size</el-divider><!-- =============================================================== -->
	<p class="desc"></p>
	<el-slider v-model="size2" /></el-slider>
	<el-space wrap :size="size2">
		<el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
			<template #header>
				<div class="card-header">
					<span>Card name</span>
					<el-button class="button" type="text">Operation button</el-button>
				</div>
			</template>
			<div v-for="o in 4" :key="o" class="text item">
				{{ 'List item ' + o }}
			</div>
		</el-card>
	</el-space>
	
	
	<el-divider content-position="left">自动换行</el-divider><!-- =============================================================== -->
	<p class="desc">利用 wrap 属性控制换行</p>
	<p class="desc">在 水平 (horizontal) ** 模式下, 通过控制 wrap（布尔类型）**来控制是否自动换行</p>
	<el-space :wrap="true">
		<div v-for="i in 20" :key="i">
			<el-button type="" text> Text button </el-button>
		</div>
	</el-space>
	
	<el-divider content-position="left">行间分隔符</el-divider><!-- =============================================================== -->
	<p class="desc">有时候，仅仅在行间加空白并不能满足我们的日常需求，此时分隔符 (spacer) 就可以发挥非常好的作用了。</p>
	<el-space :size="size3" spacer="|">
		<div v-for="i in 5" :key="i">
			<el-button> button {{ i }} </el-button>
		</div>
	</el-space>
	
	<el-divider content-position="left">对齐方式</el-divider><!-- =============================================================== -->
	<p class="desc">使用 alignment 属性来对齐</p>
	<p class="desc">设置该值可以调整所有子节点在容器内的对齐方式，可设置的值与 align-items一致。</p>
	<div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc;">
		<el-space>
			string
			<el-button> button </el-button>
			<el-card>
				<template #header> header </template>
				body
			</el-card>
		</el-space>
	</div>
	<div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc;">
		<el-space alignment="flex-start">
			string
			<el-button> button </el-button>
			<el-card>
				<template #header> header </template>
				body
			</el-card>
		</el-space>
	</div>
	<div style=" width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc;">
		<el-space alignment="flex-end">
			string
			<el-button> button </el-button>
			<el-card>
				<template #header> header </template>
				body
			</el-card>
		</el-space>
	</div>
	
	<el-divider content-position="left">填充容器</el-divider><!-- =============================================================== -->
	<p class="desc">用 fill 属性让子节点自动填充容器</p>
	<p class="desc">通过 fill**（布尔类型）**参数，您可以控制子节点是否自动填充容器。</p>
	<p class="desc">下面的例子中，当设置为 fill 时，子节点的宽度会自动适配容器的宽度。</p>
	<div style="border: 1px solid #ccc;">
		<div style="margin-bottom: 15px">
			fill: <el-switch v-model="fill"></el-switch>
		</div>
		<el-space :fill="fill" wrap>
			<el-card v-for="i in 3" :key="i" class="box-card">
				<template #header>
					<div class="card-header">
						<span>Card name</span>
						<el-button class="button" type="text">Operation button</el-button>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ 'List item ' + o }}
				</div>
			</el-card>
		</el-space>
	</div>
	
	<el-divider content-position="left">填充容器2</el-divider><!-- =============================================================== -->
	<p class="desc">用 fillRatio 自定义填充比例</p>
	<p class="desc">也可以使用 fillRatio 参数，自定义填充的比例， 默认值为 100，代表基于父容器宽度的 100% 进行填充</p>
	<p class="desc">需要注意的是，水平布局和垂直布局的表现形式稍有不同，具体的效果可以查看下面的例子</p>
	<div>
		<div style="margin-bottom: 15px">
			direction:
			<el-radio v-model="direction" label="horizontal">horizontal</el-radio>
			<el-radio v-model="direction" label="vertical">vertical</el-radio>
		</div>
		<div style="margin-bottom: 15px">
			fillRatio:<el-slider v-model="fillRatio"></el-slider>
		</div>
		<el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">
			<el-card v-for="i in 5" :key="i" class="box-card">
				<template #header>
					<div class="card-header">
						<span>Card name</span>
						<el-button class="button" type="text">Operation button</el-button>
					</div>
				</template>
				<div v-for="o in 4" :key="o" class="text item">
					{{ 'List item ' + o }}
				</div>
			</el-card>
		</el-space>
	</div>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			msg: 'Hello Vue!!',
			size: 'small',
			size2: 20,
			size3: 10,
			fill: true,
			direction: 'horizontal',
			fillRatio: 30
		}
	},
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>